<template>
  <div id="classroom">
    <div class="mainbg">
      <Row>
        <Col span="24" class="parent">
          <Row class="logintop">
            <Col span="24"></Col>
          </Row>
          <Row>
            <Col span="8">&nbsp</Col>
            <Col span="8">
              <router-link to="/my">
                <div class="loginborder">
                  <p class="loginbtn">登录</p>
                </div>
              </router-link>
            </Col>
            <Col span="8"></Col>
          </Row>
          <Row class="loginbottom">
            <Col>&nbsp</Col>
          </Row>
          <Row>
            <Col span="1">&nbsp</Col>
            <Col span="10">
              <Button type="default" size="large" long to="/course">就业班课程</Button>
            </Col>
            <Col span="1">&nbsp</Col>
            <Col span="1">&nbsp</Col>
            <Col span="10">
              <Button type="default" size="large" long to="/course">专题课程</Button>
            </Col>
            <Col span="1">&nbsp</Col>
          </Row>
        </Col>
      </Row>
      <Row class="imgtop">
        <Col span="24">&nbsp</Col>
      </Row>
      <Row>
        <Col class="loginimg">
          <img src="../assets/login/multi-device.png" class="loginimg" />
        </Col>
      </Row>
      <Row>
        <Col span="24">&nbsp</Col>
      </Row>
      <Row>
        <Col span="7">&nbsp</Col>
        <Col>
          <p class="loginsize">
            登录
            <span class="muti">后可以多设备同步学习</span>
          </p>
        </Col>
        <Col span="7">&nbsp</Col>
      </Row>
      <Row class="loginbottom2">
        <Col>&nbsp</Col>
      </Row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Row, Col, Button } from "view-design";

export default {
  name: "classroom",
  components: {
    Row,
    Col,
    Button
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
@import "../../static/base.css";
.parent {
  height: 250px;
  background-color: #fff;
}
.logintop {
  height: 65px;
}
.loginbottom {
  height: 36px;
}
.loginbtn {
  background-color: #f5a623;
  color: #fff;
  font-size: 18px;
  width: 66px;
  height: 66px;
  border-radius: 50px;
  padding-left: 15px;
  padding-top: 25px;
  margin-left: 3px;
  margin-top: 3px;
}
.loginborder {
  border: 1px solid #f5a623;
  width: 74px;
  height: 74px;
  border-radius: 50px;
  margin: 0 auto;
}
.loginimg {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
/* .imgh{
    height: 120px;
} */
.imgtop {
  height: 50px;
}
.loginsize {
  font-size: 13px;
}
.muti {
  color: #99a4bd;
}
.loginbottom2 {
  height: 152px;
}
</style>